<template>
  <div>
    <van-sticky>
      <van-nav-bar
        title="预约咨询"
        left-text="返回"
        left-arrow
        fixed
        @click-left="onClickLeft"
      ></van-nav-bar>
    </van-sticky>
    <div class="content">
      <form action="/">
        <van-search
          v-model="keyword"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
          @cancel="onCancel"
          @click-left-icon="onSearch"
        />
      </form>
      <div class="consultant">
        <div class="title">咨询师</div>
        <div class="sex">
          <van-dropdown-menu>
            <van-dropdown-item v-model="sex" :options="option1" />
          </van-dropdown-menu>
        </div>
      </div>
      <div
        v-for="item in expertList"
        :key="item.id"
        class="van-coupon expert"
        @click="expertOrder(item)"
      >
        <div class="img-div">
          <img :src="item.headPortrait" alt="" class="expert-img" />
        </div>

        <div class="info">
          <div class="name">
            <span>{{ item.expertInquiryName }}</span
            ><span style="color: red">￥{{ item.consultFee }}</span>
          </div>
          <!-- <div class="remark" v-html="item.remark"></div> -->
          <div class="motto">
            {{ item.expertIntroduce }}
          </div>
          <div class="type">
            <div v-for="item2 in item.type" :key="item2">
              {{ item2 }}
            </div>
          </div>
          <!-- <div class="remark">1{{ item.remark }}</div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, computed, ref, watch } from 'vue'
import { getEInquiryList } from '../../api/expert/list'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'

export default defineComponent({
  setup() {
    const router = useRouter()
    const onClickLeft = () => {
      router.push({ name: 'home' })
    }

    const keyword = ref('')
    const onSearch = (val: any) => {
      if (keyword.value.length == 0) return
      expertList.value = []
      getList()
    }
    const onCancel = () => {
      expertList.value = []
      if (sex.value === 2) {
        getList()
      } else {
        sex.value = 2
      }
    }

    let expertList: any = ref([])
    onMounted(async () => {
      getList()
    })

    const sex = ref(2)
    const option1 = [
      { text: '性别', value: 2 },
      { text: '男', value: 1 },
      { text: '女', value: 0 },
    ]

    //性别选项发生变化触发
    watch(
      () => sex.value,
      () => {
        expertList.value = []
        getList()
      }
    )

    function getList() {
      getEInquiryList(1, 100, {
        state: 1,
        keyword: keyword.value,
        sex: sex.value == 2 ? '' : sex.value,
      }).then((res) => {
        const data = res.data.data.records
        data.forEach((item: any) => {
          let list: string[] = []
          let name = item?.expertCategoryName
          if (name && name.indexOf(',') > -1) {
            list = name.split(',')
          } else {
            list.push(name)
          }
          item.type = list
          expertList.value.push(item)
        })
      })
    }

    const expertOrder = (item: any) => {
      router.push({
        path: '/expert-details',
        query: {
          id: item.id,
          userId: item.userId,
          tenantId: item.tenantId,
        },
      })
    }
    return {
      onClickLeft,
      expertList,
      expertOrder,
      onSearch,
      onCancel,
      keyword,
      sex,
      option1,
    }
  },
})
</script>

<style lang="less" scoped>
.content {
  margin-top: 50px;
  padding-bottom: 50px;

  .expert {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 95px;

    .info {
      width: 65%;
      height: 90%;
      font-size: 14px;
      color: #646566;
      display: flex;
      justify-content: space-between;
      flex-direction: column;

      .name {
        font-weight: bold;
        font-size: 13px;
        color: black;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .remark {
        font-size: 12px;
        margin: 5px 0;
        overflow: hidden;
        min-height: 50px;
        text-overflow: ellipsis;
        // white-space: nowrap;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
      }

      .motto {
        font-size: 11px;
      }

      .type {
        display: flex;
        flex-wrap: wrap;
        font-size: 10px;

        div {
          border-radius: 9px;
          background: rgba(71, 146, 197, 0.7);
          color: white;
          padding: 2.5px 7px;
          margin-left: 5px;
          margin-top: 5px;
        }
      }
    }

    .img-div {
      height: 60px;
      position: relative;

      .expert-img {
        width: 60px;
        // height: 60px;
        border-radius: 50%;
      }
    }
  }

  .consultant {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: white;
    margin-bottom: 10px;

    .title {
      width: 45%;
      font-size: 15px;
      text-indent: 15px;
    }
  }
}
</style>
